<template>
	<view class="checkstand">
		<common-navbar title="支付"></common-navbar>
		<view class="order-info-container">
			<view class="cost-detail-wrapper">
				<view class="cost-detail-top">
					<view class="cost-unit">
						￥
					</view>
					<view class="cost-value">
						{{orderDetail.amount}}
					</view>
				</view>
				<view class="cost-label">
					应付费用
				</view>
			</view>
			<view class="order-info-bottom-container">
				<view class="order-info-item">
					<view class="label">
						付费项目
					</view>
					<view class="content">
						{{orderDetail.project}}
					</view>
				</view>
				<view class="order-info-item">
					<view class="label">
						购买时间
					</view>
					<view class="content">
						{{orderDetail.created_at}}
					</view>
				</view>
				<view class="order-info-item">
					<view class="label">
						支付单号
					</view>
					<view class="content">
						{{orderDetail.task_code}}
					</view>
				</view>
			</view>
		</view>
		<view class="payment-pattern-container">
			<view class="title">
				支付方式
			</view>
			<view class="payment-pattern-item">
				<view class="item-left">
					<u-image
						src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/e6657845-579e-414a-9db6-f86aafbad9f9.png"
						width="48" height="48" style="margin-right:16rpx;" />
					<view class="pattern-name">
						微信
					</view>
				</view>
				<u-checkbox-group>
					<u-checkbox :value="true" />
				</u-checkbox-group>
			</view>
		</view>
		<button class="pay-btn" @click="pay">立即支付{{orderDetail.amount}}元</button>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			// console.log(JSON.parse(JSON.parse(decodeURIComponent(options.query)).orderDetail));
			const urlQuery = JSON.parse(decodeURIComponent(options.query));
			this.orderDetail = JSON.parse(urlQuery.orderDetail);
			console.log(this.orderDetail)
		},
		onUnload() {
			console.log('离开页面')

			setTimeout(() => {
				if (!this.paySuccess) {
					return this.$u.route('/pages/order/order')
				}
			}, 1000)
		},
		data() {
			return {
				orderDetail: null,
				paySuccess: false,
			}
		},
		methods: {
			async pay() {
				try {
					const {
						data
					} = await this.$u.post(this.$restUrl.getWXPayOptions, {
						task_code: this.orderDetail.task_code,
						// amount: this.orderDetail.amount,
						amount: '0.01',
					})
					const res = await this.$wx.WXPay(data);
					this.paySuccess = true;
					this.$showToast('支付成功');
				} catch (e) {
					this.paySuccess = false;
					this.$showToast('支付失败');
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./checkstand.scss";
</style>
